<template>
	<div class="u-page u-general-color">
		<u-navbar :title="title" :custom-back="comeback" :background="background" :border-bottom="false"
			:title-bold="true" title-color="#040503" back-icon-color="#040503"></u-navbar>
		<div>
			<div class="u-font-bold sticky-top">
				<u-tabs :list="topList" :current="currentTop" @change="changeTop" :active-item-style="activeStyle"
					:bar-style="barStyle" bg-color="#00000000" :is-scroll="false" :font-size="32"></u-tabs>
			</div>
			<!-- 待办 -->
			<div class="u-pt-5" v-if="currentTop == 0">
				<div class="search u-pb-10">
					<div class="search-width">
						<u-search :show-action="false" :clearabled="true" shape="square" bg-color="#fff"
							:placeholder="placeholderText" v-model="keyword" @search="search"></u-search>
					</div>
				</div>
				<div class="notification-content" v-for="(item, index) in WorkToDoList" :key="index" @click="toChangeDetails(item)">
					<div class="box">
						<div class="u-flex">
							<u-badge :is-dot="true" type="error" :offset="[30,720]" bgColor="#f02323"
								v-if="!isNotNull(item.firstReadTime)"></u-badge>
							<div class="u-mr-10">
								<u-avatar :src="item.prvUserAvatar" size="110"></u-avatar>
							</div>
							<div class="u-flex-1 u-mr-10">
								<div class="u-title" style="display: flex">
									<span class="u-pr-5">{{item.subject}}</span>
								</div>
								<div>
									<div class="u-inline u-cl-content u-fz-12">
										上一环节处理人：<span>{{item.prvNickName}}</span>
									</div>
								</div>
							</div>
						</div>
						<div class="u-mb-10 u-pt-5">
							<u-row gutter="16">
								<u-col span="3">
									<view>
										工作编号
									</view>
								</u-col>
								<u-col span="9">
									<view>
										<span class="u-pr-10">{{item.reqNumber}}</span>
										<!-- <u-tag text="即将到期" mode="dark" size="mini" type="error"></u-tag> -->
									</view>
								</u-col>
							</u-row>
						</div>

						<div class="u-mb-10">
							<u-row gutter="16">
								<u-col span="3">
									<view>
										当前进度
									</view>
								</u-col>
								<u-col span="9">
									<view>
										{{item.nodeName}}
									</view>
								</u-col>
							</u-row>
						</div>

						<div class="u-mb-10">
							<u-row gutter="16">
								<u-col span="3">
									<view>
										到达日期
									</view>
								</u-col>
								<u-col span="9">
									<view>
										{{item.startTime}}
									</view>
								</u-col>
							</u-row>
						</div>
					</div>
				</div>
			</div>
			<!-- 已办 -->
			<div class="u-pt-5" v-if="currentTop == 1">
				<div class="search u-pb-10">
					<div class="search-width">
						<u-search :show-action="false" :clearabled="true" shape="square" bg-color="#fff"
							:placeholder="placeholderText1" v-model="keyword1" @search="search1"></u-search>
					</div>
				</div>
				<div class="notification-content" v-for="(item, index) in WorkCompletedList" :key="index" @click="toChangeDetails(item)">
					<div class="box">
						<div class="u-flex">
							<u-badge :is-dot="true" type="error" :offset="[30,720]" bgColor="#f02323"
								v-if="!isNotNull(item.XFirstReadTime)"></u-badge>
							<div class="u-mr-10">
								<u-avatar :src="item.prvUserAvatar" size="110"></u-avatar>
							</div>
							<div class="u-flex-1 u-mr-10">
								<div class="u-title" style="display: flex">
									<span class="u-pr-5">{{item.subject}}</span>
								</div>
								<div>
									<div class="u-inline u-cl-content u-fz-12">
										上一环节处理人：<span>{{item.prvNickName}}</span>
									</div>
								</div>
							</div>
						</div>
						<div class="u-mb-10 u-pt-5">
							<u-row gutter="16">
								<u-col span="3">
									<view>
										工作编号
									</view>
								</u-col>
								<u-col span="9">
									<view>
										<span class="u-pr-10">{{item.reqNumber}}</span>
									</view>
								</u-col>
							</u-row>
						</div>

						<div class="u-mb-10">
							<u-row gutter="16">
								<u-col span="3">
									<view>
										当前进度
									</view>
								</u-col>
								<u-col span="9">
									<view>
										{{item.nodeName}}
									</view>
								</u-col>
							</u-row>
						</div>

						<div class="u-mb-10">
							<u-row gutter="16">
								<u-col span="3">
									<view>
										到达日期
									</view>
								</u-col>
								<u-col span="9">
									<view>
										{{item.endTime}}
									</view>
								</u-col>
							</u-row>
						</div>
					</div>
				</div>
			</div>

		</div>

	</div>
</template>

<script>
	export default {

		data() {
			return {
				currentTop: 0,
				topList: [{
						name: '我的待办',
					},
					{
						name: '我的已办',
					}
				],
				placeholderText: '请输入关键字,搜索我的待办',
				keyword: '',
				pageNum: 1,
				pageSize: 10,
				WorkToDoList: [],
				placeholderText1: '请输入关键字,搜索我的已办',
				keyword1: '',
				pageNum1: 1,
				pageSize1: 10,
				WorkCompletedList: [],
				title: '工作台',
				background: {
					backgroundColor: '#f3e4e9',
				},
				activeStyle: {
					color: "#303133"
				},
				barStyle: {
					backgroundColor: "#eb5468"
				},
				backto: '',
			}
		},

		onShow: function() {

		},

		mounted() {

		},

		onReady() {

		},

		onLoad(options) {
			//未登录跳转到登录页面
			this.checkLogin();
			if (this.isNotNull(options.backto)) {
				this.backto = options.backto
			}
			this.getWorkToDoList()
			this.getWorkCompletedList()
		},

		onPullDownRefresh() {
			if (this.currentTop == 0) {
				this.pageNum = 1
				this.getWorkToDoList()
			} else if (this.currentTop == 1) {
				this.pageNum1 = 1
				this.getWorkCompletedList()
			}
			// 停止Loading
			uni.stopPullDownRefresh();
		},

		onReachBottom() {
			if (this.currentTop == 0) {
				this.pageNum += 1
				this.getWorkToDoList()
			} else if (this.currentTop == 1) {
				this.pageNum1 += 1
				this.getWorkCompletedList()
			}
		},

		methods: {

			/** 
			 * 返回上一页
			 */
			comeback() {
				if (this.isNotNull(this.backto)) {
					uni.reLaunch({
						url: '/pages/index/incomeIndex'
					});
				} else {
					this.goBack()
				}
			},

			/**
			 * 工作待办搜索
			 */
			async search() {
				this.pageNum = 1
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/todo/page/list",
					userId: uni.getStorageSync('userInfo').userId,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					searchStr: this.keyword,
					todoType: '工作待办',
					status: 'Current',
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200 && result.rows) {
					this.WorkToDoList = result.rows
				}
			},

			/**
			 * 工作已办搜索
			 */
			async search1() {
				this.pageNum1 = 1
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/todo/page/list",
					userId: uni.getStorageSync('userInfo').userId,
					pageNum: this.pageNum1,
					pageSize: this.pageSize1,
					searchStr: this.keyword1,
					todoType: '工作待办',
					status: 'ARC',
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});

				if (result.code == 200 && result.rows) {
					this.WorkCompletedList = result.rows
				}
			},

			/**
			 * 获取工作待办
			 */
			async getWorkToDoList() {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/todo/page/list",
					userId: uni.getStorageSync('userInfo').userId,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					searchStr: this.keyword,
					todoType: '工作待办',
					status: 'Current',
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					if (this.pageNum != 1) {
						this.WorkToDoList = this.WorkToDoList.concat(result.rows)
					} else {
						this.WorkToDoList = result.rows
					}
				}
			},

			/**
			 * 获取工作已办
			 */
			async getWorkCompletedList() {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/todo/page/list",
					userId: uni.getStorageSync('userInfo').userId,
					pageNum: this.pageNum1,
					pageSize: this.pageSize1,
					searchStr: this.keyword1,
					todoType: '工作待办',
					status: 'ARC',
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					if (this.pageNum1 != 1) {
						this.WorkCompletedList = this.WorkCompletedList.concat(result.rows)
					} else {
						this.WorkCompletedList = result.rows
					}
				}

			},

			/**
			 * 点击待办/已办的跳转地址
			 */
			async toChangeDetails(item) {
				console.log(item)
				if (!this.isNotNull(item.firstReadTime)) { // 如果该消息为未读的话先设置为已读再跳转
					let result = await this.$u.api.unifyMiniRestGet({
						systemid: "meily",
						url: "/todo/read/" + item.id,
						loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
					});
					if (result.code == 200) {
						item.firstReadTime = this._getTimes();
					}
				}
				if(item.status == 'Current'){
					this.$u.route(item.minAppUri)
				} else if(item.status == 'ARC'){
					this.$u.route(item.minDoneUrl)
				}
			},

			/** 
			 * 切换tab
			 */
			changeTop(index) {
				this.currentTop = index
			}

		}

	};
</script>

<style lang="scss" scoped>
	.section {
		// background-color: #e5e5e5;
		width: 100%;
		overflow: hidden;
	}

	.content {
		width: 620rpx;
		height: 50rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.notification-content {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		// padding-bottom: 20rpx;
		// border-bottom: 1rpx #e5e5e5 solid;
	}

	.messType {
		padding-left: 5rpx;
		color: #2979ff;
		font-weight: bold;
	}

	.float-left {
		float: left;
	}

	.float-right {
		float: right;
	}

	.color_gray {
		color: #b2b3b5;
	}

	.color-blue {
		color: #1989fa;
	}

	.color-pink {
		color: #e55e97;
	}

	.detail {
		color: #1989fa;
		font-size: 30rpx;
		font-weight: bold;
	}

	.box {
		width: 100%;
		padding-left: 5%;
		padding-right: 5%;
		position: relative;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx #e5e5e5 solid;
	}

	li {
		padding-top: 20rpx;
	}

	.topbar {
		font-size: 30rpx;
		font-weight: bold;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1rpx #e5e5e5 solid;
		padding-left: 30rpx;
		padding-right: 30rpx;
		background-color: white;
	}

	.topbar3 {
		font-size: 30rpx;
		font-weight: bold;
		height: 85rpx !important;
		border-bottom: 1rpx #e5e5e5 solid;
		padding-left: 30rpx;
		padding-right: 30rpx;
		background-color: white;
	}

	.slot-content {
		font-size: 28rpx;
		color: $u-content-color;
		padding-left: 30rpx;
		padding-bottom: 30rpx;
		text-align: center;
	}

	.notice-title {
		width: 580rpx;
		height: 40rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.search {
		width: 100%;
		text-align: left;
	}

	.search-width {
		width: 95%;
		margin: 0 auto;
	}

	.search-width2-2 {
		width: 70%;
		// margin: 0 auto;
	}

	.search-width3 {
		// width: 600rpx;
		width: 100%;
	}

	swiper {
		height: 1350rpx !important;
	}

	.news-item {
		width: 100%;
		padding-left: 8%;
		padding-right: 5%;
		position: relative;
		// background-color: #ffffff;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx #e5e5e5 solid;
	}

	.news-item-select {
		width: 100%;
		padding-left: 2%;
		padding-right: 5%;
		position: relative;
		// background-color: #ffffff;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx #e5e5e5 solid;
	}

	.new-item-title {
		font-size: 33rpx;
		font-weight: bold;
		color: #303133;
	}

	.new-item-titleY {
		font-size: 33rpx;
		font-weight: bold;
		color: #bcbcbc;
	}

	.news-item-content {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		color: #bcbcbc;
	}

	.batch {
		font-size: 28rpx;
		font-weight: 300;
		text-decoration: underline;
		color: #2979ff;
	}

	.batchDel {
		font-size: 28rpx;
		font-weight: 300;
		text-decoration: underline;
		color: red;
	}

	.fw-bold {
		font-weight: bold;
	}

	.sticky-top {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 1;
	}

	.flex-space-between {
		justify-content: space-between;
	}

	.screen {
		font-size: 30rpx;
		color: #8c8e92;
	}

	// 弹出层样式
	.popup-box {
		height: 300rpx;
	}

	.popup-item {
		height: 90rpx;
		text-align: center;
		padding-top: 20rpx;
		font-size: 35rpx;
		font-weight: 500;
	}

	.border-top-small {
		border-top: 0.5rpx #dcdada solid;
	}

	.bg-color-white {
		background-color: white;
	}

	.sticky-top {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 1;
	}
</style>